{% extends "base.html" %}

{% block initJavascript %}
  var ele = document.getElementsByName("leftSide");
  ele[0].style.border = "1px solid #AAAAAA";
{% endblock %}

{% block fades %}
  fadeColor("fadeQ1","#FFFFFF","#000000",4,20,'f');
  fadeColor("fadeQbY1","#FFFFFF","#000000",4,20,'fb');
  fadeColor("fadeQbN1","#FFFFFF","#000000",4,20,'fb');
  fadeColor("fadeQbU1","#FFFFFF","#000000",4,20,'fb');
{% endblock %}

{% block javascript %}
  function postToUrl(path, params, method) {
    // Set method to post by default, if not specified.
    method = method || "post"; 
    
    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);
    
    for(var key in params) {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", params[key]);
    
        form.appendChild(hiddenField);
    }
    document.body.appendChild(form);
    form.submit();
  }

  function answer(n, id, value, aux, last) {
    var eleY = document.getElementsByName("fadeQbY"+n);
    var eleN = document.getElementsByName("fadeQbN"+n);
    var eleU = document.getElementsByName("fadeQbU"+n);
    if(value == 1) {
      eleY[0].style.backgroundColor = "#CCCCCC";
      eleN[0].style.backgroundColor = "#FFFFFF";
      eleU[0].style.backgroundColor = "#FFFFFF";
    }
    else if(value == 0) {
      eleY[0].style.backgroundColor = "#FFFFFF";
      eleN[0].style.backgroundColor = "#CCCCCC";
      eleU[0].style.backgroundColor = "#FFFFFF";
    }
    else {
      eleY[0].style.backgroundColor = "#FFFFFF";
      eleN[0].style.backgroundColor = "#FFFFFF";
      eleU[0].style.backgroundColor = "#CCCCCC";
    }
    if(n == 1) {
      window.value1 = value;
      window.id1 = id;
      window.aux1 = aux;
    }
    else if(n == 2) {
      window.value2 = value;
      window.id2 = id;
      window.aux2 = aux;
    }
    else if(n == 3) {
      window.value3 = value;
      window.id3 = id;
      window.aux3 = aux;
    };
    n1 = n+1;
    if(last != 1) {
      fadeColor('fadeQ'+n1,'#FFFFFF','#000000',4,20,'f');
      fadeColor('fadeQbY'+n1,'#FFFFFF','#000000',4,20,'fb');
      fadeColor('fadeQbN'+n1,'#FFFFFF','#000000',4,20,'fb');
      fadeColor('fadeQbU'+n1,'#FFFFFF','#000000',4,20,'fb');
    } else {
      d = {};
      d['id1'] = window.id1;
      d['a1'] = window.value1;
      d['aux1'] = window.aux1;
      a = "";
      a = "id1="+window.id1+"&a1="+window.value1;

      if(window.id2 != undefined) {
        a = a + "&id2="+window.id2+"&a2="+window.value2
        d['id2'] = window.id2;
        d['a2'] = window.value2;
        d['aux2'] = window.aux2;
      }
      if(window.id3 != undefined) {
        a = a + "&id3="+window.id3+"&a3="+window.value3
        d['id3'] = window.id3;
        d['a3'] = window.value3;
        d['aux3'] = window.aux3;
      }
      postToUrl("/answers", d);
      //window.location = "/answers?"+a;
    };
  }
{% endblock %}

{% block upperLeft %}
    {{person.firstName}} {{person.lastName}}
{% endblock %}

{% block menuItems %}
  <div id="menuItemRight"> <a href="/?logout=1">logout</a> </div>
  <div id="menuItemRight"> <a href="/about">Hvad er zentienz?</a> </div>
{% endblock %}

{% block leftSide %}
  {{calendarCode|safe}}
{% endblock %}

{% block rightSide %}
  {{questionCode|safe}}
{% endblock %}

{% block inHeader %}
  {{mapcode|safe}}
  <script type="text/JavaScript">
    function newInit() {
      init();
      load();
    }
    window.onload = newInit;
    window.onunload = GUnload;
  </script>
{% endblock %}

{% block content %}
  {% if textToUser %}
    <div id=myP>{{ textToUser|safe }}</div>
  {% endif %}
  <div id=myP>Lige nu er jeg her:</div>
  <div id="map" style="width: 760px; height: 460px"></div>
{% endblock %}
